<template>
  <view class="vuex-demo">
    <view class="title">Vuex 演示组件</view>
    
    <view class="section">
      <view class="section-title">状态数据展示</view>
      <view class="data-item">当前时间: {{ currentData }}</view>
      <view class="data-item">登录状态: {{ isLogin ? '已登录' : '未登录' }}</view>
      <view class="data-item" v-if="userInfo">用户名称: {{ userInfo.name }}</view>
      <view class="data-item" v-if="businessId">当前门店ID: {{ businessId }}</view>
    </view>

    <view class="section">
      <view class="section-title">操作按钮</view>
      <up-button type="primary" @tap="refreshData">刷新数据</up-button>
      <up-button type="success" @tap="login" v-if="!isLogin">登录</up-button>
      <up-button type="error" @tap="logout" v-if="isLogin">退出登录</up-button>
      <up-button type="default" @tap="getBusinessList">获取门店列表</up-button>
    </view>

    <view class="section" v-if="businessList.length > 0">
      <view class="section-title">门店列表</view>
      <view class="business-item" v-for="item in businessList" :key="item.businessId">
        {{ item.businessName }} (ID: {{ item.businessId }})
        <up-icon name="check" size="20" color="#007aff" v-if="item.businessId === businessId"></up-icon>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

// 获取store实例
const store = useStore();

// 从store中获取状态
const currentData = computed(() => store.getters.getData);
const isLogin = computed(() => store.getters.getIsLogin);
const userInfo = computed(() => store.getters.getUserInfo);
const businessId = computed(() => store.getters.getBusinessId);
const businessList = computed(() => store.getters.getBusinessList);

// 调用action刷新数据
const refreshData = () => {
  store.dispatch('refreshData').then(() => {
    uni.showToast({
      title: '数据已刷新',
      icon: 'success'
    });
  });
};

// 调用action登录
const login = () => {
  const mockUserInfo = {
    name: '测试用户',
    phone: '13800138000',
    roleName: '管理员'
  };
  store.dispatch('login', mockUserInfo).then(() => {
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    });
  });
};

// 调用mutation退出登录
const logout = () => {
  store.commit('logout');
  uni.showToast({
    title: '已退出登录',
    icon: 'none'
  });
};

// 调用action获取门店列表
const getBusinessList = () => {
  store.dispatch('getBusinessList').then(() => {
    uni.showToast({
      title: '门店列表已获取',
      icon: 'success'
    });
  });
};
</script>

<style lang="scss" scoped>
.vuex-demo {
  padding: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}

.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.data-item {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #666;
}

.business-item {
  font-size: 28rpx;
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.up-button {
  margin-bottom: 20rpx;
}
</style>